<!-- 广场 -->
<template>
  <view class="bg-home">
    <!--干货列表-->
    <z-paging-list ref="list" v-model="state.list" :safe-area-inset-bottom="false" @loadData="loadData">
      <template #top>
        <logo-navbar />
        <!--顶部图片-->
        <view class="mx-4 mt-2">
          <u-swiper :list="state.bannerList" name="image" height="260" border-radius="12" @click="onBannerClick" />
        </view>
        <!--导航栏-->
        <view class="tab-wrap">
          <u-tabs v-model="state.tabIndex" :list="tabList" bg-color="none" bar-height="6" bar-width="44"
            active-color="#333" inactive-color="#999" font-size="32" :bar-style="{ backgroundColor: '#F4AF22' }"
            @change="refresh" />
        </view>
      </template>
      <!--干货分类-->
      <view v-if="state.tabIndex == 0">
        <scroll-view class="whitespace-nowrap bg-#faf9f6 px-3 py-4 fixed z-1" scroll-x enhanced :show-scrollbar="false">
          <view v-for="(item, index) in state.categoryList" :key="index" class="tabs-style"
            :class="[{ 'tabs-style_selected': state.categorySelectId == item.id }]" @click="onCategorySelect(item)">{{
              item.category_name }}</view>
        </scroll-view>
        <view class="pt-12">
          <drygood-item v-for="item in state.list" :key="item.id" :data="item" />
        </view>
      </view>
      <!--线上课程-->
      <view v-if="state.tabIndex == 1">
        <view class="flex justify-center mt-3">
          <view class="course-botton-all">
            <image class="w-28 h-26 mr-1 " src="/static/images/common/ic_all.jpg"></image>
            <view class="c-#f4af22 text-28 ml-1" @click="navigate('/package_square/pages/course/list')">查看全部课程</view>
          </view>
        </view>
        <view class="mx-4 mt-4 grid grid-cols-2 gap-3">
          <course-item v-for="item in state.list" :key="item.id" :data="item" />
        </view>
      </view>
      <!--课程预告-->
      <view v-if="state.tabIndex == 2" class="pt-3 mx-4">
        <course-preview-item v-for="item in state.list" :key="item.id" class="mb-2" :data="item" />
      </view>
    </z-paging-list>
    <button size="default" type="" open-type="contact">
      <view class="w-136 h-136 z-1000 fixed bottom-100 right-30">
        <image class="w-136 h-136" src="/static/images/common/ic_service.jpg"></image>
      </view>
    </button>

  </view>
</template>
<script setup>
import { reactive } from "vue";
import { navigate } from "@/common/util/uni";
import { bannerJumpUrls } from "@/common/constant/square";
import { getBannerList, getArticleCategoryList, getArticleList, getOnlineRecommendCourseList, getOfflineCourseList } from '@/common/http/module/square'

const list = ref()
const state = reactive({
  bannerList: [],
  categoryList: [],
  categorySelectId: '',
  tabIndex: 0,
  list: []
})

const tabList = [{ name: '外贸干货' }, { name: '线上课程' }, { name: '课程预告' }]

function loadOtherData() {
  getBannerList().then(res => {
    state.bannerList = res.data
  })
  getArticleCategoryList().then(res => {
    state.categoryList = res.data
  })
}

function loadData(page) {
  const funcList = {
    0: getArticleList,
    1: getOnlineRecommendCourseList,
    2: getOfflineCourseList
  }

  const params = {
    category_id: state.categorySelectId,
    page
  }

  const func = funcList[state.tabIndex]
  func(params).then(res => {
    list.value.onLoadResult(res.data.data || [])
  }).catch(() => {
    list.value.onLoadResult([])
  })
}

function refresh() {
  list.value.onRefresh()
}

function onBannerClick(index) {
  const banner = state.bannerList[index]
  const { jump_type, jump_id } = banner
  if (jump_type == 0) return

  const url = bannerJumpUrls[jump_type]
  uni.navigateTo({
    url: `${url}?id=${jump_id}`
  })
}

function onCategorySelect(item) {
  state.categorySelectId = state.categorySelectId == item.id ? '' : item.id
  refresh()
}

onLoad(() => {
  loadOtherData()
})
</script>

<style lang="scss" scoped>
.bg-home {
  height: 100vh;
  background: linear-gradient(0deg, rgba(246, 246, 246, 1) 0%, rgba(249, 249, 249, 1) 50.76%, rgba(255, 251, 239, 1) 97.54%, rgb(255, 251, 238) 100%);
}

.tab-wrap {
  height: 82rpx;
  margin: 32rpx 32rpx 0 32rpx;
  border-bottom: 2rpx solid #EEEEEE;
}

.tabs-style {
  border-radius: 12rpx;
  background-color: #F5F5F5;
  display: inline-block;
  padding: 4rpx 44rpx;
  font-size: 28rpx;
  color: #999999;
  margin-right: 20rpx;

  &_selected {
    padding: 3rpx 44rpx;
    border: 2rpx solid #F4AF22;
    color: #F4AF22;
  }
}

.course-botton-all {
  width: 296rpx;
  height: 64rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10rpx;
  border: 2rpx solid #F4AF22;
}

:deep(.u-scroll-box) {
  display: flex;
  justify-content: space-between;
}

:deep(.u-tab-item) {
  width: fit-content !important;
  flex: initial !important;
  padding: 0 !important;
}
</style>
